<template>
  <div class="detail" v-if="goodDetail">
    <!-- 轮播图 Strat -->
    <van-swipe :autoplay="3000" @change="onChange">
      <van-swipe-item @click="onClick" v-for="(image, index) in bannerImgUrlList" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">
          <span>
            {{ current + 1 }}/{{ bannerImgUrlList.length }}
          </span>
        </div>
      </template>
    </van-swipe>
    <!-- 轮播图 End -->

    <div class="pricedetail">
      <div class="price">
        <span class="realprice">￥<b>{{ goodDetail.pageInitialProps[0].body.goodsDynamic.kaolaPrice }}</b></span>
        <span class="discount" v-if="goodDetail.pageInitialProps[0].body.goodsDynamic.goodsDetailBottomButton">
          {{ goodDetail.pageInitialProps[0].body.goodsDynamic.goodsDetailBottomButton.priceVO.pricePrefix }}
          <span>￥</span>
          <b>{{ goodDetail.pageInitialProps[0].body.goodsDynamic.goodsDetailBottomButton.priceVO.price }}</b>
        </span>
      </div>
      <!-- 黑卡 Strat -->
      <div class="balckcard" @click="blackCardShow = true">
        <span>{{ goodDetail.pageInitialProps[0].body.goodsDynamic.appGoodsDetailVipInfo.vipLayoutInfo.mainText
        }}</span>
        <img src="https://kaola-haitao.oss.kaolacdn.com/8ac1f870-eeea-4f14-9c79-253c232dcd9c.webp">
        <p class="quickBtn">
          <span>立即开卡</span>
        </p>
      </div>
      <van-action-sheet v-model="blackCardShow"
        :title="goodDetail.pageInitialProps[0].body.dx.data.blackCard.fields.vipInfo.vipLayoutInfo.pointIconView.title"
        :cancel-text="goodDetail.pageInitialProps[0].body.dx.data.blackCard.fields.vipInfo.vipLayoutInfo.pointIconView.bottonText">
        <div class="content">
          <div class="title"
            v-html="goodDetail.pageInitialProps[0].body.dx.data.blackCard.fields.vipInfo.vipLayoutInfo.pointIconView.oneSaveView.saveValue">
          </div>
          <div class="item"
            v-for="(item, index) in goodDetail.pageInitialProps[0].body.dx.data.blackCard.events.showPointIconView[0].fields.saveList"
            :key="index + item.saveType">
            <span>{{ item.saveName }}</span>
            <span v-html="item.saveValue"></span>
            <p>{{ item.saveNameDesc }}</p>
          </div>
        </div>
      </van-action-sheet>
      <!-- 黑卡 End -->

      <div class="info">
        <van-cell is-link @click="infoshow = true" value="更多">
          <template #title>
            <div>
              <span
                v-for="item in goodDetail.pageInitialProps[0].body.goodsDynamic.promotionSlipView.singleSlipViewList"
                :key="item.slip">
                {{ item.slip }}
              </span>
            </div>
          </template>
        </van-cell>
        <van-action-sheet v-model="infoshow" title="优惠促销" cancel-text="确认">
          <div class="content">
            <p>促销活动</p>
            <div class="item">
              <span>立减</span>
              <p class="txt">下单立减30元。。。。。。</p>
            </div>
          </div>
        </van-action-sheet>
      </div>

      <div class="tax">
        <van-cell @click="infoshow1 = true">
          <template #title>
            <div>
              <span>
                {{ goodDetail.pageInitialProps[0].body.goodsDynamic.goodsTaxInfo.taxStr }}
              </span>
              <img :src="require('@/assets/img/good/taxinfo.png')">
            </div>
          </template>
        </van-cell>
        <van-action-sheet v-model="infoshow1"
          :title="goodDetail.pageInitialProps[0].body.goodsDynamic.goodsTaxInfo.taxFloat.title">
          <div class="content">
            <span>{{ goodDetail.pageInitialProps[0].body.goodsDynamic.goodsTaxInfo.taxFloat.ruleInfo }}</span>
            <div class="txt"
              v-for="item in goodDetail.pageInitialProps[0].body.goodsDynamic.goodsTaxInfo.taxFloat.contents"
              :key="item" v-html="item">
            </div>
          </div>
        </van-action-sheet>
      </div>

      <h2>{{ goodDetail.pageInitialProps[0].body.dx.data.title.fields.title.text }}</h2>

      <div class="type">
        <div class="item"
          v-for="item in goodDetail.pageInitialProps[0].body.dx.data.mindTags.fields.mindTags.mindTagItemList"
          :key="item.name">
          <img :src="item.iconUrl">
          <span>{{ item.name }}</span>
        </div>
      </div>

    </div>

    <div class="addr">
      <div class="noworry">
        <van-cell is-link @click="showPopup">
          <template #title>
            <img :src="goodDetail.pageInitialProps[0].body.dx.data.noWorry.fields.noWorry.pageIcon">
            <span>{{
                goodDetail.pageInitialProps[0].body.dx.data.noWorry.fields.noWorry.goodsNoWorryIntegration[0].itemContent
            }}</span>
          </template>
          <template #right-icon>
            <img src="https://kaola-haitao.oss.kaolacdn.com/a6d18c26-1c93-4820-9ec9-0ed7e547e74c.webp">
          </template>
        </van-cell>
        <van-popup v-model="showPop" closeable close-icon="cross" close-icon-position="top-right" position="bottom"
          :style="{ height: '60%' }">
          <div class="title">
            <van-cell is-link
              :value="goodDetail.pageInitialProps[0].body.dx.data.noWorry.events.showNoWorryLayer[0].fields.floatLinkTitle">
              <template #title>
                <img class="icon"
                  :src="goodDetail.pageInitialProps[0].body.dx.data.noWorry.events.showNoWorryLayer[0].fields.floatIcon">
              </template>
            </van-cell>
          </div>
          <div class="items">
            <div class="item"
              v-for="item in goodDetail.pageInitialProps[0].body.dx.data.noWorry.events.showNoWorryLayer[0].fields.goodsNoWorryFloatIntegration[0].goodsNoWorryItemList"
              :key="item.title">
              <div class="left">
                <img :src="item.icon">
              </div>
              <div class="right">
                <h4>{{ item.title }}</h4>
                <span>{{ item.description }}</span>
              </div>
            </div>
          </div>
        </van-popup>
      </div>
    </div>

    <div class="comment">
      <van-cell :title="cmtData.commentLabel" is-link :value="(cmtData.productgrade * 100).toFixed(1) + '%'">
        <template #right-icon>
          <img src="https://kaola-haitao.oss.kaolacdn.com/a6d18c26-1c93-4820-9ec9-0ed7e547e74c.webp">
        </template>
      </van-cell>
      <div class="btns">
        <van-button round color="#fff6f6" v-for="btn in cmtData.cmtTagList" :key="btn.name">{{ btn.name }}({{ btn.count
        }})</van-button>
      </div>
      <div class="out">
        <div class="items">
          <div class="item" v-for="(cmt, index) in cmtData.commentList" :key="index + cmt.commentContent">
            <div class="left">
              <div class="header">
                <img :src="cmt.avatarKaola">
                <span>{{ cmt.nicknameKaola }}</span>
              </div>
              <div class="content">
                <span class="tag">{{ cmt.stamperName }}</span>
                <span class="cnt">{{ cmt.commentContent }}</span>
              </div>
            </div>
            <div class="right">
              <img :src="cmt.imgUrls[0]">
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="brandshop" v-if="goodDetail">
      <div class="left">
        <div class="img">
          <img :src="goodDetail.pageInitialProps[0].body.dx.data.brandShop.fields.icon">
        </div>
        <div class="txt">
          <div class="title">
            <span class="brandname">{{ goodDetail.pageInitialProps[0].body.dx.data.brandShop.fields.title }}</span>
            <span class="tag">{{ goodDetail.pageInitialProps[0].body.dx.data.brandShop.fields.tag }}</span>
          </div>
          <span class="num" v-html="goodDetail.pageInitialProps[0].body.dx.data.brandShop.fields.subTitle"></span>
        </div>

      </div>
      <div class="right">
        <img :src="goodDetail.pageInitialProps[0].body.dx.data.brandShop.fields.bgImage" class="bg-img">
        <img src="https://kaola-haitao.oss.kaolacdn.com/12a66d82-ea49-496c-a236-7f08815120b3.png" class="mask-img">
        <span>{{ goodDetail.pageInitialProps[0].body.dx.data.brandShop.fields.jumpTitle }}</span>
        <van-icon name="arrow" color="#fff" />
      </div>
    </div>

    <div class="recommend" v-if="recommendData">
      <div class="title">相关推荐</div>
      <van-row gutter="10">
        <van-col span="8" v-for="(good, index) in recommendData.list" :key="index">
          <router-link :to="{ name: 'detail', params: { id: good.goodsId } }">
            <div class="img">
              <img :src="good.tmtImage">
            </div>
            <div class="title">
              <img :src="good.titlePrefixIcon">
              <span>{{ good.title }}</span>
            </div>
            <div class="benefit">
              <div class="items" v-if="good.benefitPointList">
                <div class="item" v-for="(item, index) in good.benefitPointList" :key="index + item">
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="price">
              ￥{{ Math.round(good.currentPrice) }}
            </div>
          </router-link>
        </van-col>
      </van-row>
    </div>

    <van-divider>详情介绍</van-divider>

    <div class="proInfo" v-if="proInfo">
      <div :class="{ 'infos': true, 'open': !openShow, 'close': openShow }">
        <div class="title">产品信息</div>
        <div class="items">
          <div class="item" v-for="(info, index) in proInfo.goodsPropertyList" :key="index">
            <div class="left">{{ info.propertyName }}</div>
            <div class="right">
              <span v-for="item in info.goodsPropertyValueList" :key="item.propertyValue">
                {{ item.propertyValue }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="oac" @click="openShow = !openShow">
        <div class="open" v-if="openShow">
          展开
          <img :src="require('@/assets/img/good/open.png')">
        </div>
        <div class="close" v-else>
          收起
          <img :src="require('@/assets/img/good/open.png')">
        </div>
      </div>
      <div class="imgs">
        <div class="img" v-html="proInfo.detail"></div>
        <img :src="proInfo.brandStoryImage">
      </div>
      <div class="introduc">
        <van-collapse v-model="activeNames">
          <van-collapse-item title="版本说明" name="1">
            <div class="version">
              <div class="txt">
                <span>
                  由于海淘商品是品牌方交由不同国家的生产厂家生产且出售国家地区不同，因此会出现同一商品多版本情况，不同版本的商品会存在细微的差异
                  <span>（包括产地信息、批次号、产品包装、外观细节等），请以实物为准。</span>
                </span>
                <span>小考拉对每批商品都会经过5道程序仔细核对，确保发到您手中的商品均为正品，假一赔十，请您放心购买</span>
              </div>
              <div class="show">
                <div class="tit">不同版本商品外观存在细微差异</div>
                <div class="slide">
                  <div class="items">
                    <div class="item" v-for="(version, index) in proInfo.originList" :key="index">
                      <img :src="version.imgUrl">
                      <span>{{ version.name }}</span>
                    </div>
                  </div>
                </div>
                <div class="footer">
                  <div class="btn">查看更多版本商品细节图</div>
                </div>
              </div>
            </div>
          </van-collapse-item>
          <van-collapse-item title="包装与生产日期" name="2">
            <div class="package">
              <p><br></p>
              <p><span>1.商品发货后，通常预计10-16个工作日到货（跨境运输受地域远近、相关管制等各因素影响，时效可能存在迟延，请随时关注后台物流更新轨迹并以此为准）</span></p>
              <p><br></p>
              <p><span>2.请您于签收时开箱查验确认内物商品完好，若出现问题，尽可能完整拍摄外箱及面单、箱内清单及实物问题照片或视频，联系考拉商家为您解决。</span></p>
              <p><br></p>
              <p><span>更多内容您可查看平台公示的相关规则、服务帮助，或联系考拉客服9510286</span></p>
            </div>
          </van-collapse-item>
          <van-collapse-item title="价格说明" name="3">
            <div class="price">
              <ol>
                <li>
                  <span>划线价、参考价：商品展示的划线价或参考价可能是品牌专柜价、商品吊牌价或由品牌供应商提供的正品零售价（如厂商指导价、建议零售价等）或该商品在考拉上曾经展示过的销售价；由于地区、时间的差异性和市场行情的波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格仅供您参考。</span>
                </li>
                <li><span>促销价：如无特殊说明，促销价是销售商在参考价基础上给予的优惠价格。如有疑问，您可以与客服联系。</span></li>
                <li><span>考拉价：考拉非会员用户购买的商品详情页显示的售价，是非会员用户最终决定是否购买该商品的依据。</span></li>
                <li><span>会员价：在考拉价的基础上给予会员用户的优惠价格，仅会员用户可以会员价购买该商品。</span></li>
                <li><span>折扣：页面显示的“折扣”为考拉价与划线价的对比，该对比值仅供您参考，不作为计算考拉价的依据。&nbsp;</span></li>
                <li><span>价格异常：因可能存在系统缓存、页面更新延迟等不确定性情况，导致价格显示异常，商品具体售价请以订单结算页价格为准。如您发现异常情况出现，请立即联系我们补正，以便您能顺利购物。</span>
                </li>
              </ol>
            </div>
          </van-collapse-item>
          <van-collapse-item title="消费者告知书" name="4">
            <div class="custom">
              <p><span>尊敬的客户：</span></p>
              <p>
                <span>您好！为帮助您更好地选购境外商品，<strong><span>请您在购买前务必认真、详细阅读并完全理解本告知书的全部内容，并对自身风险承担做出客观判断</span>。</strong>同意本告知书内容后再下单购买：</span>
              </p>
              <p><br></p>
              <ol>
                <li><span>您在考拉海购上购买的跨境商品等同于境外购买，商品本身可能无中文标签，如有需要，您可以通过商品详情页查看相关商品标签中文翻译或联系客服。</span>
                </li>
                <li><span>根据相关法律政策，您选购的跨境商品仅限个人自用，不得进行再次销售。</span></li>
                <li><span>您购买的跨境商品符合原产地有关质量、安全、卫生、环保、标识等标准或技术规范要求，可能与我国标准有所不同，由此可能产生的危害、损失或者其他风险，将由您自行承担。</span>
                </li>
                <li><span>考拉海购为平台经营者，商品均由商家向您提供，由其承担商品质量安全保证责任。</span></li>
              </ol>
              <p><span>考拉海购精选全球好货，严控每一个环节，为顾客提供正品保障。</span></p><br>
              <p><span>考拉海购不会通过任何非官方渠道与您联系，也不会主动要求您点击链接进行订单退款或取消订单。</span></p>
              <ul>
                <li><span> &emsp;谢谢！</span></li>
              </ul>
            </div>
          </van-collapse-item>
        </van-collapse>
      </div>
    </div>

    <div class="foru" v-if="foryouData">
      <div class="title">为你推荐</div>
      <div class="list">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-row>
            <van-col span="12" v-for="(item, index) in foryouData" :key="index">
              <router-link :to="{ name: 'detail', params: { id: item.goodsItem.goodsId } }">
                <img :src="item.goodsItem.goodsImage">
                <div class="content">
                  <div class="country">
                    <img :src="item.goodsItem.countryLogo">
                    <span>{{ item.goodsItem.countryName }}</span>
                  </div>
                  <div class="name">{{ item.goodsItem.goodsName }}</div>
                  <div class="label" v-if="item.goodsItem">
                    <span v-for="item1 in item.goodsItem.lableList" :key="item1">{{ item1 }}</span>
                  </div>
                  <div class="price">
                    <div class="symbol">￥</div>
                    <div class="money">{{ item.goodsItem.currentPrice }}</div>
                  </div>
                </div>
              </router-link>
            </van-col>
          </van-row>
        </van-list>
      </div>
    </div>

    <!-- 底部栏 Strat -->
    <van-goods-action>
      <van-goods-action-icon to="/" :icon="this.bottomTab[0]" text="首页" />
      <van-goods-action-icon :icon="this.bottomTab[1]" text="客服" />
      <van-goods-action-icon to="/cart" :icon="this.bottomTab[2]" text="购物车" />
      <van-goods-action-button @click="addCart" type="warning"
        :text="'加购(' + $store.getters.getCartGoods.length + ')'" />
      <van-goods-action-button type="danger">
        <template v-slot:default>
          <span>立即购买</span>
          <span v-if="goodDetail.pageInitialProps[0].body.goodsDynamic.goodsDetailBottomButton">
            {{ goodDetail.pageInitialProps[0].body.goodsDynamic.goodsDetailBottomButton.content }}
          </span>
        </template>
      </van-goods-action-button>
    </van-goods-action>
    <!-- 底部栏 End -->

  </div>
</template>



<script>
import { ImagePreview } from 'vant';

export default {
  data() {
    return {
      goodId: this.$route.params.id,
      goodDetail: null,
      bannerImgUrlList: null,
      current: 0,
      bottomTab: [
        require("@/assets/img/good/home.svg"),
        require("@/assets/img/good/kefu.svg"),
        require("@/assets/img/good/cart.svg")
      ],
      infoshow: false,
      infoshow1: false,
      blackCardShow: false,
      hasDiscount: true,
      showPop: false,
      cmtData: null,
      proInfo: null,
      openShow: true,
      recommendData: null,
      activeNames: [],
      foryouData: null,
      pageNo: 1,
      loading: false,
      finished: false,
    }
  },
  created() {
    this.$apiProxy({
      url: `/__aggregation/goodsdetail/product?goodsId=${this.goodId}`,
    }).then(res => {
      // console.log(res);
      // g全局，不然会返回两个  slice(24,-9)从window.__INITIAL_DATA__=(24是它的length+1)之后开始截取,一直取到<script>(-9是倒着数它的length)之前
      let datas = res.match(/window.__INITIAL_DATA__=(.*?)<\/script>/g)[0].slice(24, -9);
      datas = JSON.parse(datas);
      this.goodDetail = datas;
      // this.goodDetail = res.data;
      // console.log(this.goodDetail);
      this.bannerImgUrlList = this.goodDetail.pageInitialProps[0].body.goodsDynamic.bannerImgUrlList

      this.$apiProxy({
        url: `/goods/content?version=1.0`,
        method: "post",
        data: {
          contentParam: {
            goodsId: this.goodId
          }
        }
      }).then(res2 => {
        // console.log(res2);
        this.proInfo = res2.body;
        // console.log(this.proInfo);
      });

      this.$api.getGoodRecommand().then(res3 => {
        // console.log(res3);
        this.recommendData = res3.body;
        // console.log(this.recommendData);
      });

      this.$apiProxy({
        url: `/getGoodsDetailRecommendFeeds?version=1.0`,
        method: "post",
        data: {
          recommendFeedsParam: {
            pageSize: 20,
            callSource: "RECOMMENDS_FEEDS_GOODS_DETAIL",
            goodsId: this.goodId,
            spmUrl: "",
            pageNo: this.pageNo
          }
        }
      }).then(res4 => {
        // console.log(res4);
        this.foryouData = res4.body.recList;
        // console.log(this.foryouData);
        this.pageNo++;
      });
    });
    this.$apiProxy({
      url: `/comment/goodsdetail?version=1.0`,
      method: "post",
      data: {
        abCaseNumber: 0,
        goodsId: this.goodId
      }
    }).then(res1 => {
      // console.log(res1);
      this.cmtData = res1.body;
    });
  },
  methods: {
    onClick() {
      ImagePreview({
        images: this.bannerImgUrlList,
        startPosition: this.current,
        closeable: true,
        closeIcon: "cross"
      });
    },
    onChange(index) {
      this.current = index
    },
    showPopup() {
      this.showPop = true;
    },
    onLoad() {
      this.$apiProxy({
        url: `/getGoodsDetailRecommendFeeds?version=1.0`,
        method: "post",
        data: {
          recommendFeedsParam: {
            pageSize: 20,
            callSource: "RECOMMENDS_FEEDS_GOODS_DETAIL",
            goodsId: this.goodId,
            spmUrl: "",
            pageNo: this.pageNo
          }
        }
      }).then(res => {
        // console.log(res);
        this.pageNo++;
        this.foryouData = this.foryouData.concat(res.body.recList);
        // console.log(this.foryouData);
        this.loading = false;
        if (!res.body.hasMore) {
          this.finished = true
        }
        if (this.foryouData.length >= 100) {
          this.finished = true
        }
      });
    },
    addCart() {
      // console.log("点击了加购");
      // 手动判断是否登录
      if (this.$store.getters.getUserInfo) {
        // this.$toast("点击了加入")
        this.$store.dispatch("addCartAsync", {
          goods_id: this.goodId,
          img_url: this.bannerImgUrlList[0],
          multi_buy_limit: 50,
          price: this.goodDetail.pageInitialProps[0].body.goodsDynamic.currentPrice,
          name: this.goodDetail.pageInitialProps[0].body.dx.data.title.fields.title.text
        }).then(res => {
          this.$toast(res.msg)
        })
      }
      else {
        this.$router.push({
          name: "login",
          query: {
            next: this.$route.path
          }
        })
      }
    }
  }
}
</script>


<style lang="less">
.detail {
  background-color: rgb(239, 239, 239);

  .van-swipe {
    .van-swipe-item {
      color: #fff;
      font-size: 20px;
      text-align: center;

      img {
        width: 100%;
      }
    }

    .custom-indicator {
      width: 35px;
      height: 18px;
      position: absolute;
      left: 50%;
      color: white;
      text-align: center;
      line-height: 18px;
      letter-spacing: 4px;
      bottom: 20px;
      margin-left: -18px;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      background: url(../assets/img/good/swipe-page-bg.png);
      background-size: cover;

      span {
        display: block;
        transform: scale(0.9);
      }
    }
  }

  .van-goods-action {
    height: 51px;
    display: flex;
    padding: 0px 10px 5px 0px;

    .van-goods-action-icon {
      width: 32px;
      min-width: 20px;
      white-space: nowrap;

      .van-icon {
        img {
          width: 21px;
          height: 21px;
        }
      }
    }

    .van-button--warning {
      margin-left: 10px;
      margin-right: 8.5px;
      height: 36px;
      line-height: 35px;
      border: 1px solid #ff1e32;
      font-size: 14px;
      color: #ff1e32;
      border-radius: 20px;
      text-align: center;
      background: transparent;
      flex: 0 1 20%;
    }

    .van-button--danger {
      flex: 1;
      color: rgb(255, 255, 255);
      height: 36px;
      border-radius: 20px;
      background-image: linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 61, 109) 100%);

      .van-button__content {
        .van-button__text {
          display: flex;
          font-size: 13px;
          flex-direction: column;
          justify-content: center;
        }
      }
    }
  }

  .pricedetail {
    margin-top: 7px;
    margin-left: 10px;
    width: 355px;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 -0.4vw 2.13333vw 0 rgb(0 0 0 / 4%);
    border-radius: 8px;
    padding: 10px 0;

    .price {
      width: 355px;
      padding: 0px 0px 0px 10px;
      margin: 0px 0px 10px;
      position: relative;
      display: flex;
      flex-direction: row;
      overflow: hidden;
      align-items: stretch;

      span {
        display: flex;
        flex-direction: row;
        overflow: hidden;
        align-items: center;
        align-self: center;
        font-family: "PingFang SC", "Note Sans", "Droid Sans", "Heiti SC", "Microsoft Yahei", Arial, Helvetica, sans-serif;
        color: rgb(255, 0, 0);
        justify-content: left;
        font-weight: bold;
        text-decoration: unset;
        font-style: inherit;
        width: auto;
      }

      .realprice {
        height: 30px;
        padding: 0px;
        margin: 2px 0px 0px 1px;
        font-size: 16px;

        b {
          margin: 0px;
          font-size: 24px;
          font-weight: bold;
        }
      }

      .discount {
        height: 28px;
        padding: 0px 12px;
        line-height: 25px;
        margin: 1px 0px 0px 7px;
        position: relative;
        overflow: hidden;
        align-items: flex-end;
        font-weight: normal;
        font-size: 13px;
        border-radius: 14px;
        background-image: linear-gradient(to right, rgb(255, 232, 233), rgb(255, 232, 233));

        span {
          height: 28px;
          padding: 0px;
          margin: 0px;
          font-size: 13px;
          font-weight: normal;
        }

        b {
          font-size: 20px;
          font-weight: bold;
        }

      }
    }

    .balckcard {
      height: 37px;
      width: 335px;
      padding: 0px 10px;
      display: flex;
      flex-direction: row;
      margin-bottom: 10px;
      overflow: hidden;
      align-items: center;
      align-self: center;
      background-image: linear-gradient(to right, rgb(48, 48, 48), rgb(89, 89, 89));
      border-radius: 5px;

      span {
        height: 14.4px;
        width: auto;
        padding: 0px;
        margin: 0px;
        display: flex;
        flex-direction: row;
        overflow: hidden;
        align-items: center;
        align-self: center;
        font-family: "PingFang SC", "Note Sans", "Droid Sans", "Heiti SC", "Microsoft Yahei", Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: rgb(255, 222, 177);
        justify-content: left;
        font-weight: normal;
        text-decoration: unset;
        font-style: inherit;
      }

      img {
        width: 13px;
        height: 13px;
        object-fit: contain;
        margin-left: 3px;
      }

      .quickBtn {
        height: 21px;
        width: 72px;
        padding: 0px;
        margin: 0px;
        position: absolute;
        right: 40px;
        display: flex;
        flex-direction: row;
        overflow: hidden;
        align-items: center;
        justify-content: center;
        align-self: center;
        background-image: linear-gradient(to right, rgb(255, 226, 186), rgb(255, 237, 212));
        border-radius: 10px;

        span {
          height: 16.8px;
          width: auto;
          padding: 0px;
          left: 8px;
          top: 2.1px;
          display: flex;
          flex-direction: row;
          overflow: hidden;
          align-items: center;
          align-self: center;
          text-align: center;
          font-family: "PingFang SC", "Note Sans", "Droid Sans", "Heiti SC", "Microsoft Yahei", Arial, Helvetica, sans-serif;
          font-size: 12px;
          color: rgb(51, 51, 51);
          justify-content: center;
          font-weight: normal;
          text-decoration: unset;
          font-style: inherit;
        }
      }
    }

    .info {
      margin-bottom: 10px;
      padding: 0px 10px;

      .van-cell {
        padding: 0px;

        .van-cell__title {
          display: flex;
          flex-direction: row;

          span {
            height: 22px;
            width: auto;
            padding: 3px;
            margin-right: 7px;
            position: relative;
            background-color: rgb(255, 234, 234);
            color: rgb(255, 0, 0);
            border-radius: 3px;
            height: 22px;
            font-family: "PingFang SC", "Note Sans", "Droid Sans", "Heiti SC", "Microsoft Yahei", Arial, Helvetica, sans-serif;
            font-size: 13px;
            max-width: 200px;
            font-weight: normal;
          }
        }

        .van-cell__value {
          color: rgb(255, 0, 0);
        }

        .van-icon {
          color: rgb(255, 0, 0);
          margin-left: 0px;
          font-size: 12px;
        }
      }
    }

    .tax {
      margin-bottom: 10px;

      .van-cell {
        padding: 0 10px;

        .van-cell__title {
          color: #999;
          font-size: 13px;

          img {
            width: 12px;
            height: 12px;
            vertical-align: top;
            margin-top: 5px;
          }
        }
      }
    }

    h2 {
      height: 48px;
      padding: 0px 10px;
      width: 100%;
      font-family: "PingFang SC", "Note Sans", "Droid Sans", "Heiti SC", "Microsoft Yahei", Arial, Helvetica, sans-serif;
      font-size: 17px;
      color: rgb(51, 51, 51);
      font-weight: bold;
      line-height: 24px;
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .type {
      margin-top: 10px;
      height: 15.6px;
      width: 100%;
      padding: 0px 10px;
      display: flex;
      flex-direction: row;
      align-items: center;
      overflow: hidden;

      .item {
        margin-right: 10px;
        display: flex;
        align-items: center;

        img {
          height: 15px;
          width: 15px;
        }

        span {
          height: 15.6px;
          margin: 0px 0px 0px 5px;
          font-family: "PingFang SC", "Note Sans", "Droid Sans", "Heiti SC", "Microsoft Yahei", Arial, Helvetica, sans-serif;
          font-size: 13px;
          color: rgb(102, 102, 102);
          font-weight: normal;
        }
      }
    }
  }

  .addr {
    margin: 10px 10px 0px;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 -0.4vw 2.13333vw 0 rgb(0 0 0 / 4%);

    .noworry {
      min-height: 24px;
      margin: 7.5px 0px;

      .van-cell {
        padding: 7.5px 10px;

        .van-cell__title {
          display: flex;
          align-items: center;

          img {
            width: 45px;
            height: 15px;
            margin-top: 0px;
          }

          span {
            font-size: 12px;
            display: unset;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 14.4px;
            height: 14.4px;
            width: 278px;
            color: rgb(21, 21, 21);
          }
        }

        img {
          height: 10px;
          width: 6px;
          padding: 0px;
          margin: 7px 0px;
          position: relative;
          display: flex;
          flex-direction: row;
          overflow: hidden;
          align-items: stretch;
        }
      }

      .van-popup {
        .title {
          border-bottom: 1px solid #ddd;

          .van-cell {
            height: 49px;
            width: 50vw;
            background-color: #fff;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            padding: 7.5px 0px 7.5px 10px;

            .van-cell__title {
              flex-grow: 0;

              img {
                width: 53px;
                height: 20px;
                margin-top: 0px;
              }
            }

            .van-cell__value {
              span {
                font-size: 12px;
              }
            }

            .van-icon {
              margin-left: 0px;
              color: #666;
            }
          }
        }

        .items {
          display: flex;
          flex-direction: column;

          .item {
            width: 100%;
            padding: 10px;
            display: flex;

            .left {
              img {
                width: 16px;
                height: 16px;
              }
            }

            .right {
              margin-left: 12px;
              display: flex;
              flex-direction: column;

              h4 {
                font-size: 14px;
                font-weight: 700;
                line-height: 14px;
              }

              span {
                font-size: 12px;
                color: #666;
                margin-top: 6px;
                line-height: 12px;
              }
            }
          }
        }
      }
    }
  }

  .comment {
    margin: 10px 10px 0px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 -0.4vw 2.13333vw 0 rgb(0 0 0 / 4%);
    overflow: hidden;

    .van-cell {
      padding: 5px 10px;

      .van-cell__title {
        color: #000;
        font-size: 16px;
        font-weight: 700;
        font-family: PingFang SC, Microsoft Yahei;
      }

      .van-cell__value {
        color: red;
        font-size: 13px;
        font-family: PingFangSC-Regular;
      }

      img {
        height: 10px;
        width: 6px;
        padding: 0px;
        margin: 7px 0px 4px 5px;
        position: relative;
        display: flex;
        flex-direction: row;
        overflow: hidden;
        align-items: stretch;
      }
    }

    .btns {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      height: 38px;
      overflow: hidden;
      padding: 0px 10px;

      .van-button {
        color: #333 !important;
        padding: 5px 10px;
        height: 28px;
        margin: 5px 10px 0px 0px;
        font-size: 13px;
        line-height: 13px;
      }
    }

    .out {
      height: 105px;
      margin: 10px 0px;
      padding: 0px 10px;

      .items {
        width: 100%;
        overflow-x: scroll;
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;

        .item {
          height: 98px;
          width: 248px;
          background: #fafafa;
          border: 1px solid #e9e9e9;
          border-radius: 8px;
          margin-right: 10px;
          display: flex;
          flex-direction: row;
          justify-content: start;
          align-items: center;

          .left {
            padding: 10px 10px 5px;
            height: 100%;

            .header {
              display: flex;
              align-items: center;
              justify-content: flex-start;

              img {
                width: 20px;
                height: 20px;
                margin-right: 5px;
                border-radius: 50%;
              }

              span {
                font-family: PingFangSC-Regular;
                font-size: 13px;
                color: #333;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }

            .content {
              width: 130px;
              height: 35px;
              overflow: hidden;
              margin-top: 6px;
              padding: 0;
              position: relative;
              line-height: 18px;

              .tag {
                position: absolute;
                top: 0;
                left: 0;
                height: 13px;
                background: #fff6f6;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                display: inline-block;
                color: red;
              }

              .cnt {
                text-indent: 50px;
                font-size: 12px;
                color: #333;
                text-align: justify;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
              }

            }
          }

          .right {
            height: 100%;
            overflow: hidden;

            img {
              width: 98.5px;
              height: 100%;
            }
          }
        }
      }
    }

  }

  .recommend {
    padding: 20px 10px;
    margin: 10px 10px 0px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 -0.4vw 2.13333vw 0 rgb(0 0 0 / 4%);

    .title {
      font-weight: 800;
      margin-bottom: 15px;
      font-size: 16px;
    }

    .van-row {

      img {
        width: 100%;
      }

      .van-col {
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 5px;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-content: flex-start;

        .img {
          background: #eee;
          opacity: 0.8;
          position: relative;
          border-radius: 8px;
          overflow: hidden;
        }

        .title {
          position: relative;

          img {
            position: absolute;
            height: 12px;
            width: 25px;
            top: 6px;
          }

          span {
            text-indent: 30px;
            font-size: 12px;
            line-height: 1.4;
            margin-top: 5px;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            font-weight: normal;
          }
        }

        .benefit {
          margin-top: 4px;
          height: 16px;

          .items {
            display: flex;
            flex-flow: row wrap;

            .item {
              font-size: 12px;
              color: red;
              background: #fff6f6;
              padding: 2px 4px;
              border-radius: 8px;
            }
          }
        }

        .price {
          margin-top: 4px;
          color: red;
          font-size: 14px;
          font-weight: 800;
        }
      }
    }
  }

  .brandshop {
    margin: 10px 10px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 -0.4vw 2.13333vw 0 rgb(0 0 0 / 4%);
    overflow: hidden;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;

    .left {
      padding: 10px 0 10px 10px;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;

      .img {
        width: 50px;
        height: 50px;

        img {
          width: 100%;
        }
      }

      .txt {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        height: 40px;
        margin-left: 10px;

        .title {
          display: flex;
          flex-flow: row nowrap;
          align-items: baseline;

          .brandname {
            display: block;
            font-size: 14px;
            line-height: 14px;
            max-width: 48vw;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .tag {
            font-size: 12px;
            line-height: 12px;
            background: red;
            color: #fff;
            padding: 3px;
            border-radius: 3px;
            margin-left: 4px;
          }
        }

        .num {
          color: #999;
          font-size: 12px;
          padding: 8px 0;
          overflow: visible;
        }
      }
    }

    .right {
      position: relative;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      width: 70px;
      justify-content: flex-end;
      padding-right: 10px;
      border-radius: 0 0 0 19%/0 0 0 100%;

      .bg-img,
      .mask-img {
        width: 100px;
        position: absolute;
        right: 0;
      }

      span {
        margin-right: 5px;
        font-size: 13px;
        color: #fff;
        z-index: 1;
      }

      .van-icon {
        font-size: 14px;
      }
    }
  }

  .van-divider {
    margin: 8px 0px;
    font-size: 13px;
  }

  .van-divider::after {
    margin-left: 10px !important;
  }

  .van-divider::before {
    margin-right: 10px !important;
  }

  .van-divider::after,
  .van-divider::before {
    background-color: #979797;
    margin: 10px 70px;
  }

  .proInfo {
    margin: 10px 0px 10px;
    background-color: transparent;
    width: 100%;


    .infos {
      padding: 13px 10px 10px;
      background-color: white;

      .title {
        position: relative;
        font-family: PingFangSC-Semibold;
        font-weight: 700;
        font-size: 17px;
        color: #333;
        line-height: 24px;
        margin-bottom: 10px;
      }

      .items {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        align-content: flex-start;

        .item {
          display: flex;
          flex-direction: row;

          .left {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            padding: 4px 0;
            line-height: 20px;
            font-size: 12px;
            color: #999;
            flex: none;
            width: 75px;
          }

          .right {
            display: flex;
            flex: 1;
            justify-content: flex-start;
            align-items: flex-start;
            padding: 4px 0 4px 11px;
            line-height: 20px;
            font-size: 12px;
            color: #333;

            span {
              margin-right: 4px;
            }
          }
        }
      }
    }

    .infos.close {
      height: 200px;
      overflow: hidden;
    }

    .infos.open {
      height: auto;
    }

    .oac {
      padding: 10px 0 10px;
      height: 32px;
      line-height: 18px;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 12px;
      background-color: white;
      color: #666;

      img {
        width: 6px;
        height: 10px;
        margin-left: 4px;
      }

      .open {
        img {
          transform: rotate(90deg);
          transform-origin: center center;
        }
      }

      .close {
        img {
          transform: rotate(-90deg);
          transform-origin: center center;
        }
      }
    }

    .imgs {
      background-color: white;
      margin-top: 10px;

      .img,
      img {
        display: block;
        width: 100vw;
        max-width: 100%;
      }
    }

    .introduc {
      background-color: white;
      margin-top: 10px;

      .van-collapse {
        .van-collapse-item {
          .van-collapse-item__content {
            .version {
              .txt {
                display: flex;
                flex-direction: column;
                flex-shrink: 0;
                align-content: flex-start;
                font-family: PingFangSC-Regular;
                padding: 0 10px 0 0;
                margin-bottom: 15px;
                line-height: 18.5px;

                span {
                  font-size: 11px;
                  color: #666;
                  text-align: justify;
                  display: block;

                  span {
                    font-family: PingFangSC-Medium;
                    font-size: 11px;
                    color: #333;
                  }
                }
              }

              .show {
                cursor: pointer;
                padding: 0 10px 0 0;
                display: flex;
                flex-direction: column;
                flex-shrink: 0;
                align-content: flex-start;

                .tit {
                  font-family: PingFangSC-Medium;
                  font-size: 13px;
                  color: #666;
                  margin-bottom: 10px;
                }

                .slide {
                  overflow: auto;

                  .items {
                    display: flex;
                    flex-wrap: nowrap;
                    flex-direction: row;
                    width: 520px;

                    .item {
                      margin-left: 15px;
                      position: relative;
                      margin-right: 10px;
                      display: flex;
                      flex-direction: column;
                      flex-shrink: 0;
                      align-content: flex-start;

                      img {
                        display: block;
                        width: 90px;
                        height: 90px;
                      }

                      span {
                        padding-top: 10px;
                        font-size: 11px;
                        color: #666;
                        width: 90px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                      }
                    }

                  }

                }

                .footer {
                  text-align: center;
                  padding: 15px 0;

                  .btn {
                    position: relative;
                    padding: 0 30px;
                    background: #fff;
                    font-size: 13px;
                    color: #333;
                    text-align: center;
                    height: 31px;
                    line-height: 31px;
                    outline: none;
                    border: 0
                  }
                }
              }
            }

            .package {
              span {
                color: #666;
                font-size: 12px;
                line-height: 18px !important;
              }
            }

            span {
              color: #666;
              font-size: 12px;
            }

            ol {
              padding-left: 12px;

              li {
                margin: 10px 0;
                list-style: decimal;
              }
            }
          }
        }
      }
    }
  }

  .foru {
    background-color: transparent;
    margin-bottom: 70px;

    .title {
      text-align: center;
      font-weight: 800;
      margin-bottom: 10px;
      font-size: 16px;
    }

    .list {
      .van-list {
        .van-row {
          padding: 0px 8px;

          .van-col {
            background: #fff;
            border-radius: 8px;
            margin-top: 5px;
            overflow: hidden;
            width: 49%;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            padding: 0;
            align-content: flex-start;

            img {
              width: 175px;
              height: 175px;
            }

            .content {
              padding: 0 10px 10px;
              display: flex;
              flex-direction: column;
              flex-shrink: 0;
              align-content: flex-start;

              .country {
                display: flex;
                flex-flow: row nowrap;
                align-items: center;
                margin-top: 5px;

                img {
                  width: 15px;
                  height: 15px;
                }

                span {
                  margin-left: 5px;
                  font-size: 12px;
                }
              }

              .name {
                margin-top: 4px;
                font-size: 13px;
                line-height: 1.4;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                display: -webkit-box;
              }

              .label {
                display: flex;
                flex-flow: row nowrap;
                align-items: center;
                margin: 5px 0;
                height: 15px;

                span {
                  border-radius: 3px;
                  color: red;
                  border: 1px solid red;
                  font-size: 12px;
                  margin-right: 2px;
                  display: flex;
                  flex-flow: row nowrap;
                }
              }

              .price {
                display: flex;
                flex-flow: row nowrap;
                align-items: flex-end;

                .symbol {
                  font-size: 12px;
                  color: red;
                }

                .money {
                  font-weight: 800;
                  font-size: 17px;
                  line-height: 17px;
                  color: red;
                }
              }
            }
          }

          .van-col:nth-child(even) {
            margin-left: 6px;
          }
        }
      }
    }
  }
}

.van-image-preview {
  background-color: white;

  .van-icon {
    top: 15px;
    right: 340px;
    font-size: 18px;
    color: white;
  }

  .van-image-preview__index {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    line-height: 50px;
    font-size: 16px;
    padding: 0 50px;
    text-align: center;
    margin-left: 187px;
    background-color: rgba(0, 0, 0, .6);
  }
}
</style>